<script setup lang="ts">
defineOptions({
  name: 'FmCodePreview',
})

defineProps<{
  code: string
  title?: string
}>()

const showSource = ref(false)
</script>

<template>
  <FmPageMain :title main-class="p-0">
    <div class="p-4">
      <slot />
    </div>
    <FmCode v-show="showSource" :code="code.trim()" class="rounded-none" />
    <div class="border-t p-2">
      <FmButton variant="ghost" size="sm" class="w-full" @click="showSource = !showSource">
        <FmIcon :name="showSource ? 'i-lucide:code' : 'i-lucide:code-xml'" class="size-4" />
      </FmButton>
    </div>
  </FmPageMain>
</template>
